import { fabric } from "fabric";
import { onBeforeMount, onMounted, reactive } from "vue";

export interface Selector {
  selectId: string | undefined;
}

export default function useSelectListen(canvas: fabric.Canvas) {
  const state = reactive<Selector>({
    selectId: "1",
  });
  canvas.on("object:selected", (e) => {
    const select = e.target;
  });
  onMounted(() => {
    // 选中元素的回调方法  on(eventName: "mouse:wheel", handler: (e: IEvent<WheelEvent>) => void): T;

    canvas.on("object:selected", (e) => {
      const select = e.target;
    });
    // canvas.on("object:selected", (event: { target: any; }) => {
    //   const selectedObject = event.target;
    //   console.log("选中元素: ", selectedObject);
    //   console.log("元素类型: ", selectedObject.type);
    // });
  });
  onBeforeMount(() => {
    // canvas.off();
  });
  return { select: state };
}
